<template>
  <div class="ywcOrder-container">
    <router-link to="/vip/order/nocommitDetail">
    <div class="unPayed">
      <div class="header">
        <div class="fl">2017-11-20</div>
        <div class="fr">交易完成，待评价</div>
      </div>
      <div class="body">
        <div class="pro clearfix">
          <div class="fl">
            <img src="../../../assets/images/myOrder/shangpinru.png" alt="">
          </div>
          <div class="fr">
            <ul>
              <li>2017年10月28日『武汉业主采购团』建材专场</li>
              <li>冠珠瓷砖</li>
              <li>应付订金：￥
                <span>300</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="btnBorder">
          <mt-button size="normal" type="danger" class="combtn">评价</mt-button>
        </div>
      </div>
    </div>
    </router-link>
    <noneOrder v-if='none'></noneOrder>
  </div>
</template>
<script>
    import noneOrder from '../../../components/noneOrder/index.vue'
    export default({
       data() {
        return {
          noneOrder: false
        }
      },
    components: {
			noneOrder
		}
    })
</script>
<style scoped lang="less">
.ywcOrder-container {
    margin-top: 88/37.5rem;
    .unPayed {
      background-color: #fff;
      margin-top: 24/37.5rem;
      .header {
        padding: 0 31/37.5rem;
        box-sizing: border-box;
        border-bottom: 2px solid #eee;
        height: 80/37.5rem;
        line-height: 80/37.5rem;
        .fl {
          font-size: 24/37.5rem;
        }
        .fr {
          font-size: 26/37.5rem;
          color: #da1a1e;
        }
      }
      .body {
        padding-top: 18/37.5rem;
        padding-left: 31/37.5rem;
        text-align: right;
        .pro {
          display: flex;
          padding-right: 31/37.5rem;
          .fl {
            width: 200/37.5rem;
            height: 200/37.5rem;
            margin-top: 13/37.5rem;
            margin-right: 33/37.5rem;
          }
          .fr {
            // width: 451/37.5rem;
            flex: 1;
            text-align: left;
            li:nth-of-type(1) {
              font-size: 30/37.5rem;
              line-height: 56/37.5rem;
              color: #333;
            }
            li:nth-of-type(2) {
              font-size: 28/37.5rem;
              line-height: 56/37.5rem;
              color: #555;
            }
            li:nth-of-type(3) {
              font-size: 24/37.5rem;
              text-align: right;
              span {
                color: red;
                font-size: 26/37.5rem;
              }
            }
          }
        }
        .mint-button {
          width: 170/37.5rem;
          height: 68/37.5rem;
          font-size: 28/37.5rem;
          margin-top: 31/37.5rem;
          margin-bottom: 32/37.5rem;
        }
        .hasPayed {
          text-align: right;
          font-size: 24/37.5rem;
          padding: 0;
          color: #888;
          border-bottom: 0;
          margin-top: 24/37.5rem;
          width: 100%;
          position: relative;
          .line {
            width: 104%;
            height: 20px/37.5rem;
            background-color: #eee;
            position: absolute;
            top: 0;
            right: -32/37.5rem;
          }
        }
        .btnBorder {
          display: block;
          padding-right: 31/37.5rem;
          border-top: 2px solid #eee;
          margin-top: 24/34.5rem;
        }
      }
      .viewbtn {
        background-color: #fff;
      }
      .combtn {
        background-color: #d8b78d;
      }
    }
}
</style>
